<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html >
<html lang="en">
<head>
<%@include file="../common/includeBaseSet.jsp" %>
<%@include file="../common/includeSystemSet.jsp" %>
<%@include file="../common/operation_forbid.jsp" %>
<%@include file="../common/jsVersion.jsp" %>
<link rel="stylesheet" type="text/css"  href="${jypath}/static/ext/resources/ext-theme-gray/ext-theme-gray-all.css" />
<script type="text/javascript" src="${jypath}/static/ext/ext-all.js"></script>
<script type="text/javascript" src="${jypath}/static/ext/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="${jypath}/static/js/components/callComponent.js?v=${jsVersion}"></script>
</head>
<body>
	<div class="page-content">
		<div class="row-fluid">	
		    <div class="col-xs-12 panel panel-success">
			    <form id="baseForm" class="form-horizontal">
			    	<input type='hidden' class='pageNum' name='pageNum' value='1'/>
					<input type='hidden' class='pageSize'  name='pageSize' value='10'/>
					<input type='hidden' id="status" name='status' value="${status}"/>
					<input type='hidden' id="impId" name='impId' value="${impId}"/>
					<div style="margin-top:1%">
			         	<div class="col-xs-5">
			         	    <div class="form-group">
								<label class="col-xs-3 control-label">导入人:</label>
								<div class="col-xs-6">
									 <select class="form-control" name="createUserId" id="createUserId">
										<!-- 导入人 -->
									</select>
								</div>
						     </div>
						     <div class="form-group">
								<label class="col-xs-3 control-label">关键字:</label>
								<div class="col-xs-6">
									 <input class="form-control" type="text" name="userName" id="userName" placeholder="查询客户姓名和电话号码" onfocus="this.placeholder=''" onblur="this.placeholder='查询客户姓名和电话号码'"/>
								</div>
						     </div>
				         </div>
				         <div class="col-xs-6">
							<div class="form-group">
									<label class="col-xs-3 control-label">维护人:</label>
									<div class="col-xs-4">
										 <select class="form-control" name="maintainUser" id="maintainUser">
											<!-- 维护人 -->
										</select>
									</div>
						      </div>
						      <div class="form-group">
									<label class="col-xs-3 control-label">更新时间:</label>
									<div class="col-xs-4">
										 <input name="startTime" id="startTime" type="text" class="form-control" readonly="readonly" onClick="WdatePicker()" >
									</div>
									<div class="col-xs-4">
										 <input name="endTime" id="endTime" type="text" class="form-control" readonly="readonly" onClick="WdatePicker()">
									</div>
							  </div>
							  <div class="form-group">
							   		<div>
							   			<c:forEach var="btn" items="${permitBtn}">
		        							<c:choose>
		        								<c:when test="${btn.permission=='customer:callCustomer:list'}">
										   			<button id='searchBtn' class="btn btn-warning  btn-xs" style="width:70px;margin-left:47px;" title="查询" type="button" onclick="getbaseList(1), getCount()">
										   				<i class="icon-search bigger-110 icon-only">查询</i>
										   			</button>
										   		</c:when>
										   		<c:when test="${btn.permission=='customer:callCustomer:import'}">
									   				<button id='searchBtn' class="btn btn-warning  btn-xs" style="width:70px;margin-left:15px;" title="导入" type="button" onclick="callImport('file')">
									   					导入
									   				</button>
									   			</c:when>
									   			<c:when test="${btn.permission=='customer:callCustomer:expExcel'}">
										   			<button id='searchBtn' class="btn btn-warning  btn-xs" style="width:70px;margin-left:15px;" title="导出" type="button" onclick="callExport()">
										   				导出
										   			</button>
									   			</c:when>
									   			<c:when test="${btn.permission=='customer:callCustomer:distribution'}">
										   			<button id='searchBtn' class="btn btn-warning  btn-xs" style="width:70px;margin-left:15px;" title="分配" type="button" onclick="distribution()">
										   				分配
										   			</button>
										   		</c:when>
									   		</c:choose>
										</c:forEach>
										<button id='searchBtn' class="btn btn-warning  btn-xs" style="width:70px;margin-left:15px;" title="清空" type="button" onclick="clearFrom()">
							   				清空
							   			</button>
							   		</div>
						      </div>
				         </div>
			         </div>
			    </form> 
			    </div>
			    <div class="col-xs-12">
			    	<ul id="myTab" class="nav nav-tabs">
			    	<c:choose>
					  <c:when test="${status == '0'}">
						<li class="active">
					  </c:when>
					  <c:otherwise>
						<li>
					  </c:otherwise>
					</c:choose>
							<a onclick='tabStatus(0)' data-toggle="tab" style="cursor:pointer" id="tab0">未拨</a>
						</li>
					<c:choose>
					  <c:when test="${status == '1'}">
						<li class="active">
					  </c:when>
					  <c:otherwise>
						<li>
					  </c:otherwise>
					</c:choose>
							<a onclick='tabStatus(1)' data-toggle="tab" style="cursor:pointer" id="tab1">待跟进</a>
						</li>
					<c:choose>
					  <c:when test="${status == '3'}">
						<li class="active">
					  </c:when>
					  <c:otherwise>
						<li>
					  </c:otherwise>
					</c:choose>
							<a onclick='tabStatus(3)' data-toggle="tab" style="cursor:pointer" id="tab3">已转客</a>
						</li>
					<c:choose>
					  <c:when test="${status == '2'}">
						<li class="active">
					  </c:when>
					  <c:otherwise>
						<li>
					  </c:otherwise>
					</c:choose>
							<a onclick='tabStatus(2)' data-toggle="tab" style="cursor:pointer" id="tab2">无效</a>
						</li>
					</ul>
					<table id="baseTable" class="table table-striped table-bordered table-hover" >
						<thead>
							<tr>
								<th style="width:3%" class="center">
									<label><input type="checkbox" class="ace" ><span class="lbl"></span></label>
								</th>
								<th style="width:4%"  class="center hidden-480">序号</th>
							    <th class="center hidden-480">客户姓名</th>
								<th class="center hidden-480">联系电话</th> 
								<th class="center hidden-480">导入时间</th>
								<th class="center hidden-480">维护人</th>
								<th class="center hidden-480">到访时间</th>
								<th class="center hidden-480">关注问题</th>
								<th class="center hidden-480">失败原因</th>
								<th class="center hidden-480">备注</th>
								<th class="center hidden-480">说明</th>
								<th class="center hidden-480">最后一次通话时间</th>
								<th class="center hidden-480">沟通次数</th>
								<th class="center">操作</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
					<div class="row">
						<div class="col-sm-8">
							<!--设置分页位置-->
							<div id="pageing" class="dataTables_paginate paging_bootstrap">
								<ul class="pagination"></ul>
							</div>
						</div>
					</div>
			<!-- #dialog-confirm -->
			<%@include file="../common/dialog.jsp" %>	
			</div>
		</div>
	</div>	
	
</body>
<script type="text/javascript">
	$(function () {
		ininUser();
		getCount();
		getbaseList(1)
	});
	function ininUser(){
		$.ajax({
			type: 'post',
	        url: jypath+"/system/user/findRoleUser",
		    data: {
		    },
		    dataType:'json',
		    success: function(res){
		    	$("#createUserId").empty();
		    	var list=res.obj;
		    	var option='<option value="" >全部</option>';
	    		$.each(list, function(index, row) {
	    			option=option+'<option value="'+row.id+'">'+row.userName+'</option>';
	    		});
	    		$("#createUserId").html(option);
	    		$("#maintainUser").html(option);
		    }
		});
	}
	//标签页切换状态
	function tabStatus(status){
		$("#status").val(status);
		getbaseList(1);
	}
	var listSize = "10";
	//列表
	var lastSID = 0;
	function getbaseList(init){
		if(init==1){
			$("#baseForm .pageNum").val(1);	
		}
		//JY.Model.loading();
		var loadIndex = layer.load(1, {
             shade: [0.1,'#fff'] //0.1透明度的白色背景
        });

		JY.Ajax.doRequest("baseForm",jypath +'/call/callCustomer/list',null,function(data){
			 $("#baseTable tbody").empty();
			 var page=data.obj;
			//数据集合
	    	 var results=page.rows;
	    	 listSize = page.total;
	    	 //分页数据
	     	 var pageNum=page.pageNumber,pageSize=page.pageSize,totalRecord=page.total;
	    	 var html="";
	    		 if(results!=null&&results.length>0){
	        		 var leng=(pageNum-1)*pageSize;//计算序号
	        		 for(var i = 0;i<results.length;i++){
	            		 var l=results[i];
	            		 html+="<tr>";
	            		 html+="<td class='center'><label><input type='checkbox' name='checkbox' class='ace' value='"+l.id+"'><span class='lbl'></span></label></td>";
	            		 html+="<td class='center'>"+(i+leng+1)+"</td>";
	            		 html+="<td class='center'>"+JY.Object.notEmpty(l.userName)+"</td>";
	            		 html+="<td class='center'>"+l.yhPhone+"</td>";
	            		 html+="<td class='center'>"+JY.Date.Format(l.createTime, "yyyy-MM-dd")+"</td>";
	            		 html+="<td class='center'>"+JY.Object.notEmpty(l.maintainUserName)+"</td>";
	            		 html+="<td class='center'>"+JY.Date.Format(l.visitTime, "yyyy-MM-dd")+"</td>";
	            		 html+="<td class='center' title='"+JY.Object.notEmpty(l.concern)+"'>"+text(JY.Object.notEmpty(l.concern))+"</td>";
	            		 html+="<td class='center' title='"+JY.Object.notEmpty(l.failure)+"'>"+text(JY.Object.notEmpty(l.failure))+"</td>";
	            		 html+="<td class='center' title='"+JY.Object.notEmpty(l.remark)+"'>"+text(JY.Object.notEmpty(l.remark))+"</td>";
	            		 html+="<td class='center' title='"+JY.Object.notEmpty(l.caption)+"'>"+text(JY.Object.notEmpty(l.caption))+"</td>";
	            		 html+="<td class='center'>"+JY.Date.Format(l.lastCallTime, "yyyy-MM-dd")+"</td>";
	            		 html+="<td class='center'>"+l.callNum+"</td>";
	            		 
	            		 html+="<td class='center'>";
	            		 for(var v = 0; v < l.permitBtn.length; v++){
	            			 if(l.permitBtn[v].permission == "customer:callCustomer:callPhone"){
	            				 //if(($("#status").val() == "0" || $("#status").val() == "1")){
			            			 html+="<a onclick='callPhone("+(i+leng+1)+", \""+l.id+"\", \""+l.phone+"\")' style='cursor:pointer'>拨打</a>";
			            			 html+="<input type='hidden' id='id_"+(i+leng+1)+"' id='id_"+(i+leng+1)+"' value='"+l.id+"'/>";
				            		 html+="<input type='hidden' id='maintainUser_"+l.id+"' id='maintainUser_"+l.id+"' value='"+l.maintainUser+"'/>";
				            		 if((i+1) ==  results.length){
				            			 lastSID = i+leng+1;
				            		 }
	            				 //}
	            			 }
	            		 }
	            		 
	            		 html+="&nbsp;<a onclick='callDetail(\""+l.id+"\")' style='cursor:pointer'>查看</a>";
	            		 html+="</td>";
	            		 html+="</tr>";		 
	            	 } 
	        		 $("#baseTable tbody").append(html);
	        		 JY.Page.setPage("baseForm","pageing",pageSize,pageNum,totalRecord,"getbaseList");
	        		 
	        	 }else{
	        		html+="<tr><td colspan='14' class='center'>没有相关数据</td></tr>";
	        		$("#baseTable tbody").append(html);
	        		$("#pageing ul").empty();//清空分页
	        	 }	 
	    		 layer.closeAll('loading');
		 });
	}
	//截取过长内容
	function text(content){
		var text = content;
		if(content.length>4){
			text = content.substring(0,4)+"...";
		}
		return text;
	}
	//获取tab数量
	function getCount(){
		JY.Ajax.doRequest("baseForm",jypath +'/call/callCustomer/getCount',null,function(data){
			var obj = data.obj;
			$("#tab0").text("未拨("+obj.count_0+")");
			$("#tab1").text("待跟进("+obj.count_1+")");
			$("#tab3").text("已转客("+obj.count_3+")");
			$("#tab2").text("无效("+obj.count_2+")");
		});
	}
	
	//导出
	function callExport(){
		var arr=[];
		$("input[name='checkbox']").each(function(){
		     if($(this).is(':checked')){
		    	arr.push($(this).attr("value"));
		   	 }
		});
		
		window.location.href = "${jypath}/call/callCustomer/expExcel?expIds="+arr+"&"+$("#baseForm").serialize();
	}
	
	//导入弹窗
	function callImport(mapInfo){
		layer.open({
			type:2,
		    title: "call客导入",
		    closeBtn: 2,
		    shadeClose: true,
		    area: ['580px', '420px'],
		    fix: false, //不固定
		    content: jypath +'/call/callCustomer/callImport'
		});
	}
	
	//选择主叫号码
	function callPhone(num, id, customerPhone){
		var arr=[];
// 		$("input[name='checkbox']").each(function(){
// 		     if($(this).is(':checked')){
// 				arr.push($(this).attr("value"));
// 		   	 }
// 		});
// 		if(arr.length == 0){
// 			arr.push(id);
// 		}
		//判断有无维护人
// 		for(var i = 0; i < arr.length; i++){
// 			if($("#maintainUser_"+arr[i]).val() == null || $("#maintainUser_"+arr[i]).val() == ""
// 					|| $("#maintainUser_"+arr[i]).val() == 'null'){
// 				layer.alert("请分配维护人");
// 				return false;
// 			}
// 		}
		
		var i = num;
		for(;;){
			var id_ = $("#id_"+i).val();
			if(id_ == undefined){
				break;
			}
			arr.push(id_);
			i++;
		}
// 		if($("#maintainUser_"+id).val() == null || $("#maintainUser_"+id).val() == ""
// 				|| $("#maintainUser_"+id).val() == 'null'){
// 			layer.alert("请分配维护人");
// 			return false;
// 		}

		var calltWindow=Ext.create('component.phone.calltWindow',{
			 caller:customerPhone,
			 terminalModel:'1',
			 terminalModelId:id,
			 relationId:id,
			 relationType:'1',
			 callPhoneUrl:'/call/callCustomer/callPhone',
			 contextPath:jypath,
			 callbackFun:function(uniqueId){
				 calling(arr, id, uniqueId.caller);
				 layer.msg("电话拨打中...");
			 }
		 });
		 calltWindow.initRadioGroup();
	}
	
	//弹出编辑框
	function calling(arr, id, caller){
		//弹出拨打电话框
		layer.open({
			type:2,
		    title: "拨打电话",
		    closeBtn: 1,
		    shadeClose: true,
		    maxmin: true, //开启最大化最小化按钮
		    area: ['870px', '580px'],
		    fix: false, //不固定
		    content: jypath +'/call/callCustomer/calling?callList='+arr+'&id='+id+'&caller='+caller
		});
	}
	function distribution(){
		var ids="";
		$("input[name='checkbox']").each(function(){
		     if($(this).is(':checked')){
		    	 if(ids==""){
		    		 ids=$(this).attr("value");
		    	 }else{
		    		 ids=ids+","+$(this).attr("value");
		    	 }
		   	 }
		});
		if(ids==""){
			layer.alert('请勾选需分配客户');
			return;
		}
		layer.open({
			type:2,
		    title: "分配",
		    closeBtn: 2,
		    shadeClose: true,
		    area: ['550px', '200px'],
		    fix: false, //不固定
		    content: jypath +'/call/callCustomer/distribution?ids='+ids
		});
	}
	
	function callDetail(id){
		//弹出拨打电话框
		layer.open({
			type:2,
		    title: "查看",
		    closeBtn: 1,
		    shadeClose: true,
		    maxmin: true, //开启最大化最小化按钮
		    area: ['870px', '580px'],
		    fix: false, //不固定
		    content: jypath +'/call/callCustomer/callDetail?id='+id
		});
	}
	
	function clearFrom(){
		$("#createUserId").val("");
		$("#maintainUser").val("");
		$("#userName").val("");
		$("#phone").val("");
		$("#startTime").val("");
		$("#endTime").val("");
	}
</script>
</html>